/**
 * Created by Administrator on 2017/3/20.
 */


window.onload=function () {
    banner();
    search();
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();
};

function search() {
    var searchBox = document.querySelector('.header');
    var bannerBox = document.querySelector('.banner');
    var wrap=document.querySelector('.wrpa-w');
    var height = bannerBox.offsetHeight;
    window.onscroll = function () {
        // console.log(11);
        //当前滚动的距离
        // var top = document.body.scrollTop;

        // console.log(top);
        var opacity = .8;
        // if (top > height) {
        //     opacity = 0.85;
        // } else {
        //     opacity = 0.9 * (top / height);
        // }
        searchBox.style.background = 'rgba(21,159,160' + opacity + ')';
    };
}
//轮播图
/*
 1.自动轮播
 2点对应图片s
 3图片滑动
 4滑动距离超过一定距离（1/3）滚动
 5滑动距离不超过一定距离 吸附回去
 */
function banner() {
    var banner = document.querySelector('.banner');
    var width = banner.offsetWidth;
    var imageBox = banner.querySelector('ul:first-child');
    // console.log(imageBox);
    var pointBox = banner.querySelector('ul:last-child');
    var points = pointBox.querySelectorAll('li');
    // 1.自动轮播
    var index = 1;//当前图片索引
    points[index-1].className = 'now';
    var timer = setInterval(function () {
        index++;
        //imageBox家过渡
        addTransition();
        translateX(-index * width);

    }, 3000);
    //无缝滚动
    yy.transitionEnd(imageBox, function () {
        if (index >= 9) {
            index = 1;
            removeTransition();
            translateX(-index * width);
        } else if (index <= 0) {
            index = 8;
            removeTransition();
            translateX(-index * width);
        }
        setPoint();
    })
// 2点对应图片
    var setPoint = function () {

        for (var i = 0; i < points.length; i++) {
            points[i].className = "";
        }
        //判断索引 动画结束后设置点
        points[index - 1].className = 'now';

    }

//3图片滑动
    var startX = 0;//开始坐标
    var moveX = 0;//移动时x的坐标
    var distancex = 0;//移动距离
    var isMove = false;//是否滑动过
    imageBox.addEventListener('touchstart', function (e) {
         e.stopPropagation();
        clearInterval(timer);
        startX = e.touches[0].clientX;
    });
    imageBox.addEventListener('touchmove', function (e) {
        e.stopPropagation();
        isMove = true;
        moveX = e.touches[0].clientX;
        // console.log(moveX);
        distancex = moveX - startX;
        //console.log(distancex);
        removeTransition();
        translateX(-index * width + distancex);

    });
    //谷歌浏览器toucuend可能会丢失事件 换为window
    window.addEventListener('touchend', function (e) {
//      e.preventDefault();
        e.stopPropagation();
        if (Math.abs(distancex) > (width / 3) && isMove) {
            if (distancex > 0) {
                index--;
            } else {
                index++;
            }
            addTransition();
            translateX(-index * width);
        } else {
            addTransition();
            translateX(-index * width);
        }
        isMove = false;
        startX = 0;
        moveX = 0;
        distancex = 0;
        //加定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            //imageBox家过渡
            addTransition();
            translateX(-index * width);

        }, 3000);
    })

    /*公用方法*/
//添加过渡
    var addTransition = function () {
        imageBox.style.webkitTransition = 'all .2s ';
        imageBox.style.transition = "all .2s";
    }
//删除过渡
    var removeTransition = function () {
        imageBox.style.webkitTransition = 'none';
        imageBox.style.transition = "none";
    }
// 设置定位
    var translateX = function (x) {
        imageBox.style.webkitTransform = 'translateX(' + x + 'px)';
        imageBox.style.transform = 'translateX(' + x + 'px)';

    }

}

